<template>
  <div>
    <!-- ref标记 -->
    <h2 ref="title">我是一个标题</h2>
    <!-- ref同名，后面的会覆盖前面的 一般不要同名 -->
    <h3 ref="title">我也是一个标题哦</h3>
    <button @click="getTitle">测试ref获取dom</button>

    <!-- ref标记子组件 -->
    <SonCom ref="son" />
    <button @click="getCom">测试ref获取子组件</button>

    <!-- 输入框获取焦点 -->
    <br />
    <!-- focus 方法可以让输入框获取焦点 -->
    <input ref="ipt" type="text" />
    <button @click="getFocus">点击让输入框获取焦点</button>
  </div>
</template>

<script>
import SonCom from './components/SonCom.vue'
export default {
  components: {
    SonCom
  },
  methods: {
    getTitle () {
      // console.log(this)
      console.log(this.$refs)
      // title 和 ref标记的名字同名
      // console.log(this.$refs.title)
      // console.log(this.$refs.title.innerHTML)
    },
    getCom () {
      // console.log(this.$refs)
      // 可以获取标记的子组件
      // 可以访问到数据和方法
      // console.log(this.$refs.son)
      // this.$refs.son.secret = '你是一条小青龙，小青龙！'
      // this.$refs.son.jump()
      // 不建议用 ref 替代 props和emit
      // 父子组件的关系就非常的紧密 --耦合度很高
      // emit和props， 子组件可以用在任意的地方，通用性更强一些
    },
    getFocus () {
      // console.log(this.$refs.ipt)
      this.$refs.ipt.focus()
    }
  }
}
</script>

<style></style>
